html,
body {
  height: 100%;
}
body {
  background-image: url(https://cdn7.axureshop.com/demo/1970439/images/%E7%99%BB%E5%BD%95_2/u3479.png);
  background-position: center center;
  /* 背景图不平铺 */
  background-repeat: no-repeat;
  /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */
  background-attachment: fixed;
  /* 让背景图基于容器大小伸缩 */
  background-size: cover;
}
#root {
  height: 100%;
  position: relative;
  .box {
    position: absolute;
    left: 50%;
    top: 58%;
    transform: translate(-50%, -50%);
    padding: 0 163px;
    width: 302px;
    margin: auto 0;
    background-size: cover;
    height: 332px;
    background-image: url(https://cdn7.axureshop.com/demo/1970439/images/%E7%99%BB%E5%BD%95_2/u3480.png);
    h1 {
      font-size: 35px;
      color: #fff;
      padding: 30px 0;
    }
    button {
      width: 283px;
      margin-top: 10px;
      span {
        color: #74f0e5;
      }
    }
    .input {
      background: transparent;
      width: 282px;
      height: 34px;
      text-align: center;
      padding: 0px 1px;
      margin: 10px 0;
      &::placeholder {
        color: #fff; /* 替换为你想要的颜色值 */
      }
      input {
        background: transparent;
        text-align: center;
        color: #fff;
        &::placeholder {
          color: #fff; /* 替换为你想要的颜色值 */
        }
      }
    }
  }
}
